<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>conditional selector</title>
<style>
.sample>div {
  width: 200px; height: 1.5em;
  background-color: white; color: white;
}
html.ifw800s    .sample>div[title=w800s]            { background-color: skyblue }
html.ifw1200b   .sample>div[title=w1200b]           { background-color: skyblue }
html.ifh600s    .sample>div[title=h600s]            { background-color: skyblue }
html.ifh1000b   .sample>div[title=h1000b]           { background-color: skyblue }
html.ifie       .sample>div[title=ie]               { background-color: skyblue }
html.ifie6      .sample>div>span[title=ie6]         { background-color: mediumblue }
html.ifie7      .sample>div>span[title=ie7]         { background-color: mediumblue }
html.ifie8      .sample>div>span[title=ie8]         { background-color: mediumblue }
html.ifchrome   .sample>div[title=chrome]           { background-color: skyblue }
html.ifchrome1  .sample>div>span[title=chrome1]     { background-color: mediumblue }
html.ifchrome2  .sample>div>span[title=chrome2]     { background-color: mediumblue }
html.ifchrome3  .sample>div>span[title=chrome3]     { background-color: mediumblue }
html.ifgecko    .sample>div[title=gecko]            { background-color: skyblue }
html.iffx       .sample>div[title=fx]               { background-color: skyblue }
html.iffx2      .sample>div>span[title=fx2]         { background-color: mediumblue }
html.iffx3      .sample>div>span[title=fx3]         { background-color: mediumblue }
html.iffx35     .sample>div>span[title="fx3.5"]     { background-color: mediumblue }
html.ifwebkit   .sample>div[title=webkit]           { background-color: skyblue }
html.ifsafari   .sample>div[title=safari]           { background-color: skyblue }
html.ifsafari3  .sample>div>span[title=safari3]     { background-color: mediumblue }
html.ifsafari32 .sample>div>span[title="safari3.2"] { background-color: mediumblue }
html.ifsafari4  .sample>div>span[title=safari4]     { background-color: mediumblue }
html.ifopera    .sample>div[title=opera]            { background-color: skyblue }
html.ifopera92  .sample>div>span[title="opera9.2x"] { background-color: mediumblue }
html.ifopera96  .sample>div>span[title="opera9.6x"] { background-color: mediumblue }
html.ifopera10  .sample>div>span[title="opera10.0x"]{ background-color: mediumblue }
html.ifiphone   .sample>div[title=iphone]           { background-color: skyblue }
</style>
<!--
<script src="../../../src/uuMeta.js"></script>
<script src="../../../src/uuResize.js"></script>
<script src="../../../src/uuColor.js"></script>
<script src="../../../src/uuStyle.js"></script>
<script src="../../../src/uuStyleSheet.js"></script>
<script src="../../../src/uuQuery.js"></script>
<script src="../../../src/uuAltCSS.js"></script>
<script src="../../../src/uuAltCSS+.js"></script>
 -->
<script src="../../uuAltCSS.js"></script>

<script>
function boot() {
  uuQuery.id("output").innerHTML =
      '&lt;html class="' + uuQuery.tag("html")[0].className + '"&gt;';
}
</script>
</head>
<body><div id="output"></div>
<input type="button" value="revalidate" onclick="uuAltCSS()" />
<h1>Conditional Selector</h1>
<div class="sample">
  <div title="w800s">screen width &lt;= 800px</div>
  <div title="w1200b">screen width &gt;= 1200px</div>
  <div title="h600s">screen height &lt;= 600px</div>
  <div title="h1000b">screen height &gt;= 1000px</div>
  <div title="ie">IE
    <span title="ie6">6</span>
    <span title="ie7">7</span>
    <span title="ie8">8</span>
  </div>
  <div title="fx">Firefox
    <span title="fx2">2.0</span>
    <span title="fx3">3.0</span>
    <span title="fx3.5">3.5</span>
  </div>
  <div title="opera">Opera
    <span title="opera9.2x">9.2x</span>
    <span title="opera9.6x">9.6x</span>
    <span title="opera10.0x">10.0x</span>
  </div>
  <div title="chrome">Google Chrome
    <span title="chrome1">1</span>
    <span title="chrome2">2</span>
    <span title="chrome3">3</span>
  </div>
  <div title="safari">Safari
    <span title="safari3">3.0</span>
    <span title="safari3.2">3.2</span>
    <span title="safari4">4.0</span>
  </div>
  <div title="iphone">iPhone</div>
</div>

<pre>
&lt;style&gt;
.sample&gt;div {
  width: 200px; height: 50px
  background-color: white; color: white;
}
html.ifw800s    .sample&gt;div[title=w800s]            { background-color: skyblue }
html.ifw1200b   .sample&gt;div[title=w1200b]           { background-color: skyblue }
html.ifh600s    .sample&gt;div[title=h600s]            { background-color: skyblue }
html.ifh1000b   .sample&gt;div[title=h1000b]           { background-color: skyblue }
html.ifie       .sample&gt;div[title=ie]               { background-color: skyblue }
html.ifie6      .sample&gt;div&gt;span[title=ie6]         { background-color: mediumblue }
html.ifie7      .sample&gt;div&gt;span[title=ie7]         { background-color: mediumblue }
html.ifie8      .sample&gt;div&gt;span[title=ie8]         { background-color: mediumblue }
html.ifchrome   .sample&gt;div[title=chrome]           { background-color: skyblue }
html.ifchrome1  .sample&gt;div&gt;span[title=chrome1]     { background-color: mediumblue }
html.ifchrome2  .sample&gt;div&gt;span[title=chrome2]     { background-color: mediumblue }
html.ifchrome3  .sample&gt;div&gt;span[title=chrome3]     { background-color: mediumblue }
html.ifgecko    .sample&gt;div[title=gecko]            { background-color: skyblue }
html.iffx       .sample&gt;div[title=fx]               { background-color: skyblue }
html.iffx2      .sample&gt;div&gt;span[title=fx2]         { background-color: mediumblue }
html.iffx3      .sample&gt;div&gt;span[title=fx3]         { background-color: mediumblue }
html.iffx35     .sample&gt;div&gt;span[title="fx3.5"]     { background-color: mediumblue }
html.ifwebkit   .sample&gt;div[title=webkit]           { background-color: skyblue }
html.ifsafari   .sample&gt;div[title=safari]           { background-color: skyblue }
html.ifsafari3  .sample&gt;div&gt;span[title=safari3]     { background-color: mediumblue }
html.ifsafari32 .sample&gt;div&gt;span[title="safari3.2"] { background-color: mediumblue }
html.ifsafari4  .sample&gt;div&gt;span[title=safari4]     { background-color: mediumblue }
html.ifopera    .sample&gt;div[title=opera]            { background-color: skyblue }
html.ifopera92  .sample&gt;div&gt;span[title="opera9.2x"] { background-color: mediumblue }
html.ifopera96  .sample&gt;div&gt;span[title="opera9.6x"] { background-color: mediumblue }
html.ifopera10  .sample&gt;div&gt;span[title="opera10.0x"]{ background-color: mediumblue }
html.ifiphone   .sample&gt;div[title=iphone]           { background-color: skyblue }
&lt;/style&gt;

&lt;div class="sample"&gt;
  &lt;div title="w800s"&gt;screen width &amp;lt;= 800px&lt;/div&gt;
  &lt;div title="w1200b"&gt;screen width &amp;gt;= 1200px&lt;/div&gt;
  &lt;div title="h600s"&gt;screen height &amp;lt;= 600px&lt;/div&gt;
  &lt;div title="h1000b"&gt;screen height &amp;gt;= 1000px&lt;/div&gt;
  &lt;div title="ie"&gt;IE
    &lt;span title="ie6"&gt;6&lt;/span&gt;
    &lt;span title="ie7"&gt;7&lt;/span&gt;
    &lt;span title="ie8"&gt;8&lt;/span&gt;
  &lt;/div&gt;
  &lt;div title="fx"&gt;Firefox
    &lt;span title="fx2"&gt;2.0&lt;/span&gt;
    &lt;span title="fx3"&gt;3.0&lt;/span&gt;
    &lt;span title="fx3.5"&gt;3.5&lt;/span&gt;
  &lt;/div&gt;
  &lt;div title="opera"&gt;Opera
    &lt;span title="opera9.2x"&gt;9.2x&lt;/span&gt;
    &lt;span title="opera9.6x"&gt;9.6x&lt;/span&gt;
    &lt;span title="opera10.0x"&gt;10.0x&lt;/span&gt;
  &lt;/div&gt;
  &lt;div title="chrome"&gt;Google Chrome
    &lt;span title="chrome1"&gt;1&lt;/span&gt;
    &lt;span title="chrome2"&gt;2&lt;/span&gt;
    &lt;span title="chrome3"&gt;3&lt;/span&gt;
  &lt;/div&gt;
  &lt;div title="safari"&gt;Safari
    &lt;span title="safari3"&gt;3.0&lt;/span&gt;
    &lt;span title="safari3.2"&gt;3.2&lt;/span&gt;
    &lt;span title="safari4"&gt;4.0&lt;/span&gt;
  &lt;/div&gt;
  &lt;div title="iphone"&gt;iPhone&lt;/div&gt;
&lt;/div&gt;
</pre>

</body>
</html>
